<template>
  <el-dialog
    title="角色授权"
    :visible.sync="showDialog"
    width="40%"
    @close="permIds=[]"
   >
    <!-- 树形组件 -->
    <!-- data 表示树的数据 -->
    <!-- props 表示展示的规则： { label:'展示的文字字段',children:'自己元素存储的字段' } -->
    <!-- show-checkbox 是显示勾选框 -->
    <!-- node-key 树形，表示数据的惟一字段， id -->
    <!-- default-checked-keys 是默认打钩的内容 -->
    <!-- check-strictly 是否父子遵循不关联的做法，默认为false，就是父子关联的！ 为true就父子不关联！ -->
    <el-tree
      :data="list"
      show-checkbox
      :props="{ label:'name' }"
      node-key="id"
      :default-checked-keys="permIds"
      :check-strictly="true"
      ref="tree"
     >
    </el-tree>
    <span slot="footer">
      <el-button  size="mini" @click="showDialog = false">取消</el-button>
      <el-button  size="mini" type="primary" @click="btnOK">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getPermissionList } from '@/api/permisson'
import {  getRoleDetail,assignPrem} from '@/api/setting'
import { tranListToTreeData } from '@/utils'
export default {
  name:'AssignAuth',
  data() {
    return {
      showDialog: false,
      list:[],
      permIds:[],
      roleId:''
    }
  },
  methods: {
    async initData(){
      //  2.1 发送请求
      let res = await getPermissionList()
      // 2.2 整理数据 和 赋值
      console.log(res);
      this.list = tranListToTreeData(res,'0')
    },
    // 获取角色的权限
    async getRolePerm(id){
      this.roleId = id
      const { permIds }  = await getRoleDetail(id)
      this.permIds = permIds
    },
    // 授权提交
    async btnOK(){
      const permIds = this.$refs.tree.getCheckedKeys()
      if(permIds.length === 0) return this.$message.warning('请勾选权限')
      await assignPrem({
        id:this.roleId,
        permIds
      })
      this.$message.success('授权成功')
      this.showDialog = false
    }
  },
 
}
</script>

<style>

</style>